<script src="../../../../public/static/libs/magnific-popup/magnific-popup.js"></script>{extend name="../../index/view/public/layout" /}

{block name="style"}
<link rel="stylesheet" href="__STATIC__/member/css/member.css">
<link rel="stylesheet" href="__STATIC__/member/css/charge.css">
<link rel="stylesheet" href="__STATIC__/libs/webuploader/webuploader.css">
<link rel="stylesheet" href="__STATIC__/libs/magnific-popup/magnific-popup.css">
{/block}
{block name="main-container"}
<div class="member-container wrapper clearfix">
    {include file="../application/member/view/public/left.html" /}
    <div class="member-main">
        <div class="member-main-title clearfix">
            <a href="{:url('member/moneylog/index')}" class="fr">查看资金明细</a>
            <h3>充值</h3>
            <h4><a href="{:URL('/money/withdraw')}">提现</a></h4>
        </div>
        <form action="{:URL('docharge')}" class="form form-charge" id="j-charge" method="post" target="_blank">
            <div class="control-group">
                <label for="">可用余额</label>
                <div class="con">
                    <span class="text-red">
                        <span class="number-large">{$money.account|money_convert=###} </span> 元
                    </span>
                </div>
            </div>
            <div class="control-group">
                <label for="money">充值金额</label>
                <div class="con">
                    <div class="fake-input">
                        <input type="text" name="money" id="money"> 元
                    </div>
                </div>
            </div>
			
			<div class="control-group charge-type-group">
                <label>充值方式</label>
                {if condition="$offline eq 1 && $online_recharge_switch eq 1"}
                <div class="con charge-type clearfix">
                    <a class="select-item" href="{:url('index')}">
                        线下充值
                    </a>
                    <div class="select-item active" >
                        线上充值
                    </div>
                </div>
                {elseif condition="$offline eq 0 && $online_recharge_switch eq 1"/}
                <div class="con charge-type clearfix">
                    <div class="select-item active">
                        线上充值
                    </div>
                </div>
                {elseif condition="$offline eq 1 && $online_recharge_switch eq 0"/}
                <div class="con charge-type clearfix">
                    <div class="select-item active">
                        线下充值
                    </div>
                </div>
                {/if}
            </div>

            <div class="control-group charge-type-group">
                <label>支付方式</label>
                <div class="con charge-type clearfix">
                  	<select id='charge_type' name="charge_type">
						<option value="lsjjh">网银支付</option>
					</select>
                </div>
            </div>

            <div class="control-group charge-type-group">
                <label>支付通道</label>
                <div class="con charge-type clearfix">
                  	<select id='bankCode' name="bankCode">
					</select>
                </div>
            </div>

			<div id="extra">
			</div>
            <div class="control-group">
                <label></label>
                <div class="con">
                    <input type="submit" class="btn btn-primary btn-red btn-submit" value="确认充值"/>
                </div>
            </div>
        </form>
    </div>
</div>

{/block}

{block name="script"}
<script src="__STATIC__/libs/jquery-validation/jquery.validate.js"></script>
<script src="__STATIC__/libs/jquery-validation/jquery.validate.messages_zh.js"></script>
<script>
    (function ($) {
        // 充值金额验证
        $.validator.addMethod("chargeMoney", function(value, element) {
            var tel = /^(([1-9]\d*)|\d)(\.\d{1,2})?$/;
            return this.optional(element) || (tel.test(value));
        }, "充值金额有误");
        $("#j-charge").validate({
            rules: {
                money: {
                    required: true,
                    chargeMoney: true
                }
            },

            submitHandler: function (form) {
                form.submit();
            },
            errorElement: "div",
            errorPlacement: function (error, element) {
                $(element).closest(".con").append(error);
            }
        })

    })(jQuery)
</script>

<script>
	$(document).ready(function(){
		var pay_type = {
			dspay:{
				chennl:[
					{key:"建设银行",name:"建设银行"},
					{key:"工商银行",name:"工商银行"},
					{key:"农业银行",name:"农业银行"},
					{key:"招商银行",name:"招商银行"},
					{key:"交通银行",name:"交通银行"},
					{key:"中国银行",name:"中国银行"},
					{key:"中国邮储",name:"中国邮储"},
					{key:"中信银行",name:"中信银行"},
					{key:"浦发银行",name:"浦发银行"},
					{key:"平安银行",name:"平安银行"},
					{key:"民生银行",name:"民生银行"},
					{key:"兴业银行",name:"兴业银行"},
				],
				extra:[
					{key:"bankcardid",name:"银行卡号"},
					{key:"bankfullname",name:"姓名"},
					{key:"bankidc",name:"身份证号"},
					{key:"bankmobile",name:"手机号"},
				],
			},
			lsjjh:{
				chennl:[
					{key:"320045",name:"网关支付"},
				],
				extra:[

				],
			}
		}
		function chang_select(id){
			$("#bankCode").find("option").remove();
			if(typeof(id)=="string" && id!=null && id!="" && pay_type[id].chennl.length>0){
				$.each(pay_type[id].chennl,function(idx,val){
					$("#bankCode").append("<option value='"+val.key+"'>"+val.name+"</option>");
				});
				$("#bankCode").find("option").eq(0).prop("selected", true); 
			}
			$("#extra").html("");
			if(typeof(id)=="string" && id!=null && id!="" && pay_type[id].extra.length>0){
				$.each(pay_type[id].extra,function(idx,val){
					var html = "<div class=\"control-group\"><label for=\""+val.key+"\">"+val.name+"</label><div class=\"con\"><div class=\"fake-input\"><input type=\"text\" name=\""+val.key+"\" id=\""+val.key+"\"></div></div></div>";
					$("#extra").append(html);
				});
			}

		}
		$("#charge_type").change(function(){
			var label_id=$(this).val();
			chang_select(label_id);
		});
		chang_select("lsjjh");
	});
</script>
{/block}